<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="选择模块：" class="model" prop="value">
            <el-select v-model="form.value" placeholder="请选择" @change="modelClick">
                <el-option v-for="item in modelsArr" :key="item.value" :label="item.assemblyName" :value="item.assemblyId">
                </el-option>
            </el-select>
        </el-form-item>



        <el-form-item label="零部件名称：" class="model" prop="value1">
            <el-select v-model="form.value1" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.workpieceName" :value="item.workpieceId">
                </el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="解决方案：" class="model modecom" prop="desc">
            <template slot-scope="scope">
                <input class="textscope" v-model="form.desc" @click="palyClick(form.desc)" />
            </template>
        </el-form-item>
        <el-form-item class="btn">
            <el-button type="primary" @click="onSubmit1('form')">{{ editListObj.workpieceId ? '保存' : '添加' }}</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { savePaln, editPlan } from '@/api/fulitModelApi/index.js'
export default {
    props: ["options", "modelsArr", "editListObj", "modelId"],
    data() {
        return {
            rules: {
                value1: { required: true, message: "请选择零部件", trigger: 'blur' },
                value: { required: true, message: "请选择模块", trigger: 'blur' },
                desc: { required: true, message: "请选择解决方案", trigger: 'blur' },
            },
            form: {
                desc: "",
                value: '',
                value1: ""
            },
            palyItemID: {}
        }
    },
    mounted() {

    },
    methods: {

        modelClick() {
            this.$emit("modelClickFun", this.form.value)


            this.form.value1 = ""
        },

        onSubmit1(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.options.forEach((v, i) => {
                        if (v.workpieceName == this.form.value1) {
                            this.form.value1 = v.workpieceId;
                        }
                    })
                    if (this.editListObj.workpieceId) {
                        editPlan({
                            description: this.form.desc,
                            workpieceId: this.form.value1,
                            planId: this.palyItemID.planId
                        }).then((res) => {
                            console.log(res);
                            if (res.code !== 200) {
                                this.$emit("errorFun", res)
                            } else {
                                this.$emit("setAddBox")
                            }
                        })

                    } else {
                        savePaln({
                            description: this.form.desc,
                            workpieceId: this.form.value1,
                        }).then((res) => {
                            console.log(res);
                            if (res.code !== 200) {
                                this.$emit("errorFun", res)
                            } else {
                                this.$emit("setAddBox")
                            }
                        })
                    }
                }
            })

        },
        palyClick(item) {
            console.log(item);
        }
    },

    watch: {
        editListObj: {
            handler: function (GetNewObj) {
                this.palyItemID = GetNewObj
                if (GetNewObj.workpieceId) {
                    this.form.value = this.modelId.assemblyId;
                    this.form.value1 = GetNewObj.workpieceName;

                    this.form.desc = GetNewObj.description;
                } else {
                    this.form.value = "";
                    this.form.value1 = "";
                    this.form.desc = "";
                }
            },
            immediate: true,
        }
    }
}
</script>
<style lang="less" scoped>
::-webkit-scrollbar {
    list-style: none;
}

.el-select-dropdown {
    /deep/.el-scrollbar {
        background: #031231;

        width: 218px !important;
    }
}



.el-checkbox__input /deep/ .is-checked+.el-checkbox__label {
    color: white !important;
}

.el-select {
    width: 100px;
}


.el-input--suffix .el-input__inner {
    width: 100%;

}

/deep/ .el-input__inner {
    background-color: #031331 !important; //下拉框
    color: white !important;
    border: 0px solid #5B9FC3 !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: #031231;
    color: white;
    opacity: 1;
    border: 0px solid #5B9FC3;
}

.el-popper[x-placement^=bottom] {
    background-color: #031231;
    color: white;
    opacity: 1;
    border: 0px solid #5B9FC3;
}

.el-form /deep/ .model {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
    align-items: center;
}

.el-inputmode {
    margin-left: 0px !important;

    /deep/ input {
        background: none !important;
    }
}

.el-select {
    width: 100% !important;
}

.el-form .model /deep/ .el-form-item__label {
    width: 120px !important;

}

.flex {
    display: flex;
    justify-content: normal;
    height: 71px;
}

.el-color-picker__icon,
.el-input,
.el-textarea {
    height: 100%;
    width: 97% !important;
}

.el-form-item {
    margin-bottom: 0px;
}

.el-form-item {
    display: flex;
    flex-direction: column;
}

.el-input {
    width: 82%;
    margin-left: 31px;
}

.modecom /deep/ .el-form-item__content {
    height: 110px;
    width: 92%;
    background-color: #030c20 !important;

}

.el-form-item /deep/ .el-form-item__content {
    margin: 8px !important;
    line-height: 0px;

}

.el-form-item__content .textscope {
    height: 40px;
    line-height: 40px;
    color: white;
    opacity: 1;
    border: 0px solid #5B9FC3;
    border: 0;
    background-color: #030c20 !important;
    outline: none;
    width: 100%;
}

.el-form-item /deep/ .el-form-item__label {
    width: 60% !important;
    text-align: left;
    color: white;
    margin-left: 20px;

}

.el-form {
    margin-left: 13px;
}

.el-button--primary {
    width: 100px;
    height: 40px;
    background: #031231;
    opacity: 1;
    border: 1px solid #5B9FC3;
    margin: 0px 35%;
}

.modecom {
    flex-direction: column !important;
    align-items: stretch !important;
}
</style>